<script lang="ts" setup>
import easyImage from "./Image.vue";

const imgRef = ref();
const props = defineProps({
  modelValue: {
    type: [String, Array],
    default: "",
  },
  size: {
    type: Object,
  },
  show: {
    type: [Boolean, Object],
    default: () => undefined,
  },
  tips: {
    type: String,
    default: "",
  },
  name: {
    type: String,
    default: "图片",
  },
});

const emits = defineEmits([
  "update:modelValue",
  "update:size",
  "update:show",
  "change",
]);

const onChange = (url: string, value: any) => {
  console.log(url, value);
  // 单图
  if (typeof props.modelValue === "string") {
    emits("update:modelValue", url);
    if (url) emits("update:show", true);
  }
  // 多图
  else {
    emits("update:modelValue", props.modelValue);
  }

  if (value) {
    emits("update:size", value);
  }
  emits("change");
};

const handleChangeWidth = (val: number | string) => {
  let img = imgRef.value.querySelector("img");
  let width = val;
  let height =img?parseInt(
    ((Number(width) / Number(img.naturalWidth)) * img.naturalHeight) as any
  ):props.size.height;
  emits("update:size", { width, height });
  emits("change");
};

const handleChangeHeight = (val: number | string) => {
  emits("update:size", { width: props.size.width, height: val });
  emits("change");
};

const download = () => {
  window.open(
    typeof props.modelValue === "string"
      ? props.modelValue
      : props.modelValue[0]
  );
};

const onChangeSwitch = (val: Boolean) => {
  emits("update:show", val);
  emits("change");
};
</script>
<template>
  <div class="img-container" ref="imgRef">
    <easy-image
      v-if="typeof modelValue === 'string'"
      :model-value="modelValue"
      :size="size"
      @change="onChange"
    ></easy-image>
    <template v-else v-for="(item, index) in modelValue">
      <easy-image
        v-model="modelValue[index]"
        :size="size"
        @change="onChange"
      ></easy-image>
    </template>
    <div class="rule">
      <div class="title">{{ name }}</div>
      <div class="tips">格式:jpg/png/jpeg</div>
      <div class="tips size" v-if="size">
        <span>尺寸:　</span>
        <EasyNumberInput
          :model-value="size.width"
          :min="0"
          unit="px"
          size="small"
          @change="handleChangeWidth"
        ></EasyNumberInput>
        <span style="margin: 0 10px">*</span>
        <EasyNumberInput
          :model-value="size.height"
          :min="0"
          unit="px"
          size="small"
          @change="handleChangeHeight"
        ></EasyNumberInput>
      </div>
      <div class="tips" v-else>{{ tips }}</div>
      <el-button v-if="modelValue" class="download" plain @click="download"
        >下载图片
      </el-button>
      <div class="clear" v-if="show !== undefined">
        <el-switch :model-value="show" @change="onChangeSwitch"> </el-switch>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.img-container {
  position: relative;
  min-width: 48%;
  padding: 20px;
  background-color: #f5f7fa;
  display: inline-flex;
  margin-bottom: 10px;
  .img {
    width: 124px;
    height: 124px;
    position: relative;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    background-position: 0 0, 15px 15px;
    background-size: 10px 10px;
    background-image: linear-gradient(
        45deg,
        #ccc 25%,
        transparent 0,
        transparent 75%,
        #ccc 0
      ),
      linear-gradient(45deg, #ccc 25%, transparent 0, transparent 75%, #ccc 0);
    &:hover {
      .upload-img_cover {
        opacity: 1;
      }
    }
    .upload-img_cover {
      opacity: 0;
      position: absolute;
      transition: all 0.3s ease;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
    }
  }
  .rule {
    flex: 1;
    padding-left: 20px;
    .title {
      margin-bottom: 10px;
    }
    .tips {
      color: #909399;
      font-size: 14px;
      & + .tips {
        margin-top: 5px;
      }
      :deep(.el-input-number--small) {
        width: 90px;
      }
      &.size {
        display: flex;
        align: center;
      }
    }
    .download {
      margin-top: 10px;
    }
  }

  .clear {
    position: absolute;
    right: 8px;
    top: 5px;
  }
}
</style>
